import React, {Component} from 'react';
import {View, Text, ScrollView,Image, StyleSheet} from 'react-native';
import Header from "../../../../components/header";
import {pxToDp} from "../../../../utils/styleKits";
import icon from '../../../../utils/icon'

let listData = [
  {name: '林黛玉',star:90, gender: 0, age: 15, status: '未婚', res:'年龄相仿',school:'大专', headerImg: 'https://www.itying.com/images/flutter/list1.jpg'},
  {name: '史湘云', star:80,gender: 0, age: 16, status: '已婚', res:'年龄相仿',school:'大专', headerImg: 'https://www.itying.com/images/flutter/list2.jpg'},
  {name: '贾宝玉',star:67, gender: 1, age: 15, status: '已婚', res:'年龄相仿',school:'大专', headerImg: 'https://www.itying.com/images/flutter/list5.jpg'},
  {name: '晴雯',star:99, gender: 0, age: 17, status: '未婚', res:'年龄相仿',school:'大专', headerImg: 'https://www.itying.com/images/flutter/list6.jpg'},
]

class Index extends Component {
  render() {
    return (
      <View>
        <Header title={'谁看过我'}/>

        {/*顶部总的来访展示*/}
        <View style={{alignItems:'center',marginBottom:pxToDp(10)}}>
          <ScrollView horizontal style={{margin:pxToDp(10)}}>
            {
              listData.map((item,i)=>{
                return <Image key={i} source={{uri: item.headerImg}} style={styles.headerImg}/>
              })
            }
          </ScrollView>
          <Text>最近有{listData.length}人来访，快去查看...</Text>
        </View>

        {/*列表*/}
        <View>
          {
            listData.map((item,i)=>{
              // 单个item
              return <View key={i} style={{flexDirection:'row',
                padding: pxToDp(10),paddingTop:pxToDp(16),paddingBottom:pxToDp(16),
                backgroundColor:'#fff',borderBottomWidth:pxToDp(1),borderBottomColor:'#eee'}}>
                {/*头像*/}
                <Image key={i} source={{uri: item.headerImg}} style={styles.headerImg}/>

                <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                  {/*个人信息*/}
                  <View>
                    <Text >
                      {item.name + ' '}
                      <Text style={{fontFamily:'iconfont', color: 'red'}}>{item.gender? icon.icontanhuanan: icon.icontanhuanv}</Text>
                      {" " + item.age}
                    </Text>
                    <Text>{item.status} | {item.school} | {item.res}</Text>
                  </View>

                  {/*爱心*/}
                  <View>
                    <Text style={{fontFamily:'iconfont', color:'red'}}>{icon.iconxin}
                      <Text style={{color:'black'}}>{"  "+item.star}</Text>
                    </Text>
                  </View>
                </View>
              </View>
            })
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headerImg: {
    width:pxToDp(50),
    height:pxToDp(50),
    borderRadius: pxToDp(30),
    marginRight: pxToDp(10)
  }
})

export default Index;